<!DOCTYPE html>
<html>

	<head>
		<meta name="layout" content="main">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>

		<script type="text/javascript">
			$(function() {
				var aimArea = $('.aimArea')
				$(".example1").on("click", function(event) {
					event.preventDefault();
					html2canvas(aimArea, {
						allowTaint: true,
						taintTest: false,
						onrendered: function(canvas) {
							canvas.id = "mycanvas";
							var dataUrl = canvas.toDataURL();
							var triggerDownload = $("<a>").attr("href", dataUrl).attr("download", new Date().getTime() + ".png").appendTo("body");
							triggerDownload[0].click();
							triggerDownload.remove();
						}
					});
				});

			});
		</script>
	</head>

	<body>
		<div class="aimArea" style="color: blue; background: red;">Hello! test 生成界面如下：</div>


		<input class="example1" type="button" value="截图">

	</body>

</html>